<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="产品名称">
        <el-input v-model="formInline.productName" placeholder="产品名称"></el-input>
      </el-form-item>
      <el-form-item label="产品编号">
        <el-input v-model="formInline.productId" placeholder="产品编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="float:left;margin-bottom:20px" @click="init()">添加档案</el-button>


    <el-dialog title="添加档案" :visible.sync="Addfiles" width="60%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <!-- <el-col :span="8">
            <el-form-item label="产品编号">
              <el-input v-model="form.productId"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="产品名称">
              <!-- <el-switch v-model="form.delivery"></el-switch> -->
              <el-input v-model="form.productName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="档次">
              <el-select v-model="form.productLevel" placeholder="请选择">
                <el-option label="低挡" value="低档"></el-option>
                <el-option label="中档" value="中档"></el-option>
                <el-option label="高档" value="高档"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记人">
              <el-input v-model="form.registerName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="I级分类">
              <el-select v-model="form.firstKindName" placeholder="请选择">
                <el-option label="电子" value="电子"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="II级分类">
              <el-select v-model="form.secondKindName" placeholder="请选择">
                <el-option label="计算机" value="计算机"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="III级分类">
              <el-select v-model="form.thirdKindName" placeholder="请选择">
                <el-option label="服务器" value="服务器"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="用途类型">
              <el-select v-model="form.useType" placeholder="请选择">
                <el-option label="物料" value="物料"></el-option>
                <el-option label="商品" value="商品"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市场单价">
              <el-input v-model="form.marketPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本单价">
              <el-input v-model="form.costPrice"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <!-- <el-col :span="8">
            <el-form-item label="登记人">
              <el-input v-model="form.registerName"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="创建时间">
              <el-date-picker type="datetime" v-model="form.createTime" placeholder="选择时间" style="width: 200px;"
                value-format="yyyy-MM-dd hh:mm:ss" default-time="00:00:00">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品描述">
              <el-input type="textarea" v-model="form.protDescribe">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="8">
            <el-form-item label="状态" style="display: none;">
              <el-input type="text" v-model="form.checked">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item class="a1">
          <el-button type="primary" @click="onSubmit()">登记</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-table :data="dataList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
      <el-table-column prop="productId" label="编号" style="width:150px">
      </el-table-column>
      <el-table-column prop="productName" label="产品名称" style="width:150px">
      </el-table-column>
      <el-table-column prop="useType" label="用途类型" style="width:150px">
      </el-table-column>
      <el-table-column prop="checked" :formatter="stateFormat" label="审核状态" style="width:150px">
        <!-- <template slot-scope="scope">

           </template> -->
      </el-table-column>
      <el-table-column prop="registerName" label="登记人" style="width:150px">
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" style="width:150px">
      </el-table-column>
      <el-table-column label="操作" style="width:150px">

        <!-- dialogTableVisible = true -->
        <template slot-scope="scope">
          <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查询详情</el-button> -->
          <el-button type="text" @click="details(scope.$index)">查看详情</el-button>
          <el-dialog title="查看详情" :visible.sync="dialogTableVisible" width="60%">
            <el-form ref="form" :model="form" label-width="80px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="产品编号">
                    <el-input v-model="form.productId"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="产品名称">
                    <!-- <el-switch v-model="form.delivery"></el-switch> -->
                    <el-input v-model="form.productName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="档次">
                    <el-input v-model="form.productLevel">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="I级分类">
                    <el-input v-model="form.firstKindName">
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="II级分类">
                    <el-input v-model="form.secondKindName">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="III级分类">
                    <el-input v-model="form.thirdKindName">
                    </el-input>
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="用途类型">
                    <el-input v-model="form.useType">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="市场单价">
                    <el-input v-model="form.marketPrice"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="成本单价">
                    <el-input v-model="form.costPrice"></el-input>
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="登记人">
                    <el-input v-model="form.registerName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="创建时间">
                    <el-date-picker type="datetime" v-model="form.createTime" placeholder="选择时间" style="width: 200px;"
                      value-format="yyyy-MM-dd hh:mm:ss" default-time="00:00:00">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="产品描述">
                    <el-input type="textarea" v-model="form.protDescribe">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>

                <el-col :span="8">
                  <el-form-item label="状态" style="display: none;">
                    <el-input type="text" v-model="form.checked">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-dialog>


        </template>

      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.currentPage"
      :page-sizes="[8, 10, 15]" :page-size="this.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>
<script>
  import {
    getData,
    postData
  } from '../../api/axios.js'
  export default {

    data() {
      return {
        /* start----分页有关数据,利用计算属性，返回总记录数（total） */
        pagesize: 8,
        currentPage: 1,
        /* end----分页有关数据 */
        formInline: {
          productId: '',
          productName: '',
          productLevel: '',
          registername: '',
          firstKindName: '',
          secondKindName: '',
          thirdKindName: '',
          useType: '',
          marketPrice: '',
          costPrice: '',
          registerName: '',
          createTime: '',
          protDescribe: '',
          checked: '',

        },


        Addfiles: false,
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          /* stock_identification:'',
          product_name:'',
          put_manufacturer:'',
          first_kind_name:'',
          second_kind_name:'',
          third_kind_name:'',
          use_type:'',
          market_price:'',
          cost_price:'',
          register_name:'',
          create_time:'',
          put_PM:'',
          prot_describe:'',


           delivery: false, */

        },
        formLabelWidth: '400px',
        options: [{
          value: '选项一',
          label: '已审核'
        }, {
          value: '选项二',
          label: '未审核'
        }],
        value: '',

        dataList: [],


        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        value3: ''
      }
    },
    created() {
      this.selRegistration();
    },
    methods: {
      //当每页显示数据的条数发生变化时
      handleSizeChange: function(val) {
        this.pagesize = val
      },
      //当页码进行切换时
      handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage;
      },
      //打开对话框
      init(){
        this.clearForm();
        this.Addfiles = true
      },
      onSubmit() {

        if (this.form.checked == '待审核') {
          this.form.checked = 1;
        }
        //let today = new Date();
        this.form.productId = Math.floor(Math.random() * (99999999 - 1) + 1);
        postData('product/fileRegistration', this.form).then(response => {
          console.log(response.data)
          if (response.data == "1") {
            this.$message({
              type: 'success',
              message: '添加成功'
            })

            //进行刷新
            this.selRegistration();

            this.Addfiles = false;
          } else {
            this.$message({
              type: 'error',
              message: '添加失败'
            })
          }
        }).catch(error => {
          this.$message({
            type: 'warning',
            message: '添加异常'
          })
        })
      },
      selRegistration() {
        postData('product/fileproductFiles').then(response => {
          console.log(response.data)
          this.dataList = response.data;
        }).catch(error => {
          console.log(error)
        })
      },
      stateFormat(row, column) {
        if (row.checked === 1) {
          return '未审核'
        } else {
          return '已审核'
        }
      },
      //查看商品详情
      details(index) {
        this.form = this.dataList[index];
        this.dialogTableVisible = true;
      },
      //清空form表单数据
      clearForm: function() {
        /* for (let key in this.form) {
          this.form[key] = "";
        } */

      }

    },
    created() {
      postData('product/fileproductFiles').then(response => {
        console.log(response.data)
        this.dataList = response.data;
      }).catch(error => {
        console.log(error)
      })
    },
    computed: {
      total() { //返回信息的条数
        return this.dataList.length
      }
    }
  }
</script>
<style>
  .a1 {
    text-align: center;
  }

  .el-pagination {
    text-align: center;
  }
</style>
